$(function () {

    list_op()
    list_re([1,])
    let map_hc = new Map()//缓存表
    // 随机生成一张表
    function list_op() {
        let human_map = new Map()
        let id_add = 1
        for (let i = 1; i <= 34; i++) {
            Mock.mock('http://table1', {
                "info": {
                    'ID': id_add++,
                    'name': Mock.Random.ctitle(2, 3),
                    'email': Mock.Random.email('163.com')
                }
            })
            $.get('http://table1', function (data) {
                let human_info = JSON.parse(data).info
                human_map.set(human_info.ID, human_info)
                if (human_map.size == 34) {
                    list_re([, human_map])
                    map_hc = human_map
                }
            })
        }
    }
    //点击页数
    $('#page_btn_ul li').children('button').click(function () {
        let map_hc2 = new Map()
        if (map_hc.size != 0) {
            map_hc2 = map_hc
            let page_num = $(this).text();
            $('#human_table1 tbody').html("")
            let id_num2 =1+(page_num-1)*10
            list_re([id_num2, map_hc2])
        }
    })
    // 初始化用户列表
    function list_re([chushi = 1, info]) {
        setTimeout(function () {
            btn_unload()
            btn_onload()
        }, 1000)
        $('#human_table1 tbody').html("")
        let new_map = new Map()
        if (info != undefined) {
            new_map = info
        }
        let id_num2 = chushi + 9
        if (id_num2 >34) {
            id_num2 = 34
        }
        if (new_map.size != 0) {
            for (let i = chushi; i <= id_num2; i++) {
                if (new_map.has(i)) {
                    $('#human_table1 tbody').append(
                        "<tr>"
                        + "<td>" + new_map.get(i).ID + "</td>"
                        + "<td>" + new_map.get(i).name + "</td>"
                        + "<td>" + new_map.get(i).email + "</td>"
                        + "<td><div class='dropdown'><button type='button' class='btn btn-dark dropdown-toggle' data-toggle='dropdown'>操作</button>"
                        + "<div class='dropdown-menu'><a class='dropdown-item delete_human' href='#'>删除</a>"
                        + "<a class='dropdown-item modify_human' data-toggle='modal' data-target='#modify_user' href='#'>修改</a>"
                        + "</div></div></td></tr>"
                    )
                }else{
                    // id_num2++
                    continue
                }
            }
        }
    }

    var delFun;
    var modFun;
    function btn_unload(){
        $(".delete_human").unbind("click",delFun)
        $('#modify_user_btn').unbind("click",modFun)
    }
    //删除修改
    function btn_onload() {
        $(".delete_human").bind("click",delFun=function() {
            let id = $(this).parent().parent().parent().siblings().html()
            // let the_man=$(this).parent().parent().parent().parent()
            // console.log(the_man);
            del(id)
        })
        function del(id) {
            if (confirm("确定要删除吗？")) {
                // the_man.css('display','none')
                $.ajax({
                    type: "GET",//发送请求的类型 post get
                    url: "http://localhost:7300/mock/5ee7242cb1a45736b4181f4a/dog/delete?id="+id,
                    success: function (msg) {
                        map_hc.delete(parseInt(id))
                        list_re([1,map_hc])
                        alert(msg.data.result);
                    },
                    error: function (error) {
                        console.log(error.responseText);
                    }
                });
            }
            else {
                return false;
            }
        }
        let id_modify_get=0
        //修改
        $('.modify_human').click(function () {
            id_modify_get =$(($(this).parent().parent().parent().siblings())[0]).text();
            let name = $(($(this).parent().parent().parent().siblings())[1]);
            let eamil = $(($(this).parent().parent().parent().siblings())[2]);
            $('#modify_username').val(name.text())
            $('#modify_email').val(eamil.text())
        })
        $('#modify_user_btn').bind("click",modFun=function () {
            let username = $('#modify_username').val()
            let email = $('#modify_email').val()
            $.ajax({
                type: "GET",
                url: "http://localhost:7300/mock/5ee7242cb1a45736b4181f4a/dog/modify?username=" + username + "&email=" + email,
                success: function (msg) {
                    map_hc.delete(parseInt(id_modify_get))
                    map_hc.set(parseInt(id_modify_get),{'ID':parseInt(id_modify_get),'name':username,'email':email})
                    list_re([1,map_hc])
                    alert(msg.data.result)
                },
                error: function (error) {
                    console.log(error.responseText);
                }
            })
        })
    }
    //查询
    $('#serch_user').click(function () {
        let username = $('#sh_username').val()
        let id = $('#sh_id').val()
        let email = $('#sh_email').val()
        search_user(username, id, email)
    })
    function search_user(name, id, email) {
        let table = $('#sh_result_list')
        //从服务器获取数据
        $.ajax({
            type: "GET",
            url: "http://localhost:7300/mock/5ee7242cb1a45736b4181f4a/dog/userlist2?id=这是id",
            success: function (msg) {
                let result = screen_user(msg.data)
                take_user(result)
            },
            error: function (error) {
                console.log(error.responseText);
            }
        })
        // 对数据进行筛选
        function screen_user(data) {
            let user_list1 = []
            for (i in data) {
                // console.log(data[i]);
                if (name != "" && id == "" && email == "") {
                    if (data[i].username.indexOf(name) != -1) {
                        user_list1.push(data[i])
                    }
                }
                if (name == "" && id != "" && email == "") {
                    if (data[i].id == id) {
                        user_list1.push(data[i])
                    }
                }
                if (name == "" && id == "" && email != "") {
                    if (data[i].email.indexOf(email) != -1) {
                        user_list1.push(data[i])
                    }
                }
                if (name != "" && id == "" && email != "") {
                    if (data[i].username.indexOf(name) != -1 && data[i].email.indexOf(email) != -1) {
                        user_list1.push(data[i])
                    }
                }
                if (name == "" && id != "" && email != "") {
                    if (data[i].id == id && data[i].email.indexOf(email) != -1) {
                        user_list1.push(data[i])
                    }
                }
                if (name != "" && id != "" && email == "") {
                    if (data[i].username.indexOf(name) != -1 && id == data[i].id) {
                        user_list1.push(data[i])
                    }
                }
                if (name != "" && id != "" && email != "") {
                    if (data[i].username.indexOf(name) != -1 && id == data[i].id && data[i].email.indexOf(email) != -1) {
                        user_list1.push(data[i])
                    }
                }
                if (name == "" && id == "" && email == "") {
                    user_list1.push(data[i])
                }
            }
            return user_list1
        }

        // 对数据进行显示
        function take_user(list) {
            table.html("")
            for (i in list) {
                table.append("<tr>"
                    + "<td>" + list[i].id + "</td>"
                    + "<td>" + list[i].username + "</td>"
                    + "<td>" + list[i].email + "</td>"
                    + "<td>"
                    + "<div class='dropdown'>"
                    + "<button type='button' class='btn btn-dark dropdown-toggle' data-toggle='dropdown'>操作</button>"
                    + "<div class='dropdown-menu'>"
                    + "<a class='dropdown-item' href='#'>删除</a>"
                    + "<a class='dropdown-item' href='#''>修改</a>"
                    + "</div></div></td></tr>"
                )
            }
        }
    }

    // 增加用户
    $('#clear_add').click(function () {
        $('#add_username').val("")
        $('#add_email').val("")
    })
    $('#add_user').click(function () {

        let username = $('#add_username').val()
        let email = $('#add_email').val()

        $.ajax({
            type: "GET",
            url: "http://localhost:7300/mock/5ee7242cb1a45736b4181f4a/dog/adduser?username=" + username + "&email=" + email,
            success: function (msg) {
                alert(msg.data.result)
            },
            error: function (error) {
                console.log(error.responseText);

            }

        })
    })
    function alert(msg){
        let  mo=`
        <div class="modal fade show modal_alert"  style="display: block; padding-right: 17px;" aria-modal="true" >
                                <div class="modal-dialog modal-lg" style="">
                                    <div class="modal-content" style="">
                                        <!-- 模态框头部 -->
                                        <div class="modal-header">
                                            <h4 class="modal-title">提示</h4>
                                            <button type="button" class="close" data-dismiss="modal">×</button>
                                        </div>
                                        <!-- 模态框主体 -->
                                        <div class="modal-body" style="">
                                           `+msg+`
                                            </div>
                                            <!-- 内容栏目结束 -->
                                            <!-- 模态框底部 -->
                                            <div class="modal-footer">
                                                <button class="col-md-3 border bg-light alert_close" style="height: 50px;" data-dismiss="modal">确定</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>`
        $('body').append(mo)

        $('.alert_close').click(
            function(){
                $('.modal_alert').removeClass('show').css('display','none')
            }
        )
    }

})